<template>
	<view class="comment-c" v-else-if="pageIndex === 1">
		<view class="">
			{{commentTags}}
		</view>
		<scroll-view class="comment-sc" :scroll-y="true">
			<!-- 综合评价 -->
			<view class="comment-header">
				<view class="h-l">
					<span class="score">{{commentInfo.quality_score}}</span>
					<span class="title">商家评分</span>
				</view>
				<view class="h-m">
					<view class="m-t">
						<span class="title">口味</span>
						<view class="star-c">
							<i class="icon mt-star-s" v-for="(itx, idx) in stars" :key="idx"></i>
						</view>
						<span class="score">{{commentInfo.food_score}}</span>
					</view>
					<view class="m-b">
						<span class="title">包装</span>
						<view class="star-c">
							<i class="icon mt-star-s" v-for="(itx, idx) in stars" :key="idx"></i>
						</view>
						<span class="score">{{commentInfo.pack_score}}</span>
					</view>
				</view>
				<view class="line"></view>
				<view class="h-r">
					<span class="score">{{commentInfo.delivery_score}}</span>
					<span class="title">配送评分</span>
				</view>
			</view>
			<!-- 评价标签 -->
			<view class="comment-tags">
				<view class="tag-item" v-for="(item, index) in commentTags" :key="index">
					<span>{{item}}</span>
				</view>
			</view>
			<!-- 用户评价列表 -->
			<view class="comment-list">
				<view class="item-c" v-for="(item, index) in commentInfo.comments" :key="index">
					<view class="item-l">
						<img :src="item.user_pic_url.length > 0 ? item.user_pic_url : '/static/user_avatar.svg'">
					</view>
					<view class="item-r">
						<view class="h-r">
							<!-- 用户名 评价时间 -->
							<view class="r-t">
								<span class="name">{{item.user_name}}</span>
								<span class="date">{{item.comment_time}}</span>
							</view>
							<!-- 评价星级及配送时间 -->
							<view class="r-b">
								<view class="b-l">
									<i class="icon mt-star-s" v-for="(itx, idx) in stars" :key="idx"></i>
								</view>
								<span class="b-r">{{item.ship_time}}分钟送达</span>
							</view>
						</view>
						<!-- 评语 -->
						<view class="r-comtent">
							<span>{{item.comment}}</span>
						</view>
						<!-- 评价图片 -->
						<view class="r-imgs">
							<!-- 一张 -->
							<view class="single" v-if="item.comment_pics.length === 1">
								<img :src="itm.url" v-for="(itm, idx) in item.comment_pics" :key="idx">
							</view>
							<!-- 两张 三张 -->
							<view class="double" v-if="item.comment_pics.length === 2 || item.comment_pics.length === 3">
								<img class="comment-img" :src="itm.url" v-for="(itm, idx) in item.comment_pics" :key="idx">
							</view>
							<!-- 四张 -->
							<view class="four" v-if="item.comment_pics.length === 4">
								<img class="comment-img" :src="itm.url" v-for="(itm, idx) in item.comment_pics" :key="idx">
							</view>
						</view>
						
						<view class="food-name">
							<!-- 购买商品名称 -->
							<view class="name-t" v-if="item.praise_food_tip.length > 0">
								<i class="icon mt-praise-o"></i>
								<span>{{item.praise_food_tip}}}</span>
							</view>
							<!-- 配送标签 -->
							<view class="name-b" v-if="item.comment_labels.length > 0">
								<i class="icon mt-discount-o"></i>
								<span>{{item.comment_labels.map(item => item.content).join()}}</span>
							</view>
						</view>
						<view class="reply-c" v-if="item.add_comment_list.length">
							<span>{{item.poi_reply_contents}}</span>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name: 'Recommend',
		data() {
			return {
				stars: [1, 2, 3, 4, 5]
			}
		},
		computed: {
			...mapState({
				// 全部评价信息对象
				commentInfo: state => state.shopInfo.commentData,
				// 总评标签列表
				commentTags() {
					const arr1 = this.commentInfo.comment_categories.map(c1 => {
						// 字符串转数组 数组过滤数字 重新拼合成字符串
						return c1.split('').filter(c2 => !/^\d$/.test(+c2)).join('')
					}).map((c3, index) => {
						return c3 +'(' + this.commentInfo.comment_score_type_infos[index].total_count + ')'
					})
					const arr2 = this.commentInfo.labels.map(item => {
						return item.content + '(' + item.label_count + ')'
					})
					return [...arr1, ...arr2]
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
.comment-c {
	.comment-sc {
		display: flex;
		position: fixed;
		top: 220rpx;
		flex-direction: column;
		height: 100%;
		.comment-header {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			height: 140rpx;
			background-color: white;
			width: 100%;
			justify-content: space-around;
			.h-l {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.score {
					font-size: 50rpx;
					color: $theme-color;
				}
				.title {
					font-size: 20rpx;
					color: $textBlack-color;
				}
			}
			.h-m {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				.m-t {
					display: flex;
					align-items: center;
					.title {
						font-size: 20rpx;
						color: $textBlack-color;
					}
					.star-c {
						display: flex;
						align-items: center;
						margin: 0 30rpx;
						i {
							color: $theme-color;
							font-size: 24rpx;
						}
					}
					.score {
						font-size: 24rpx;
						color: $theme-color;
					}
				}
				.m-b {
					@extend .m-t;
				}
			}
			.line {
				width: 2rpx;
				height: 80rpx;
				background-color: $spLine-color;
				margin-left: 30rpx;
			}
			.h-r {
				@extend .h-l;
				.score {
					color: $textDarkGray-color
				}
			}
		}
		.comment-tags {
			margin-top: 20rpx;
			display: flex;
			background-color: white;
			padding: 30rpx;
			width: auto;
			flex-wrap: wrap;
			padding-top: 12rpx;
			.tag-item {
				background-color: white;
				border: 2rpx solid  $spLine-color;
				padding: 0 16rpx;
				margin-right: 20rpx;
				margin-top: 18rpx;
				align-items: center;
				justify-content: center;
				line-height: 50rpx;
				span {
					font-size: 24rpx;
					color: $textDarkGray-color;
				}
			}
			.tag-item:first-child {
				background-color: #FFF7E2;
				border: 2rpx solid#F0EDBA;
				span {
					color: #E7AC40;
				}
			}
		}
		.comment-list {
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			.item-c {
				display: flex;
				overflow: hidden;
				background-color: white;
				border-bottom: 2rpx solid $spLine-color;
				.item-l {
					margin-left: 30rpx;
					margin-top: 20rpx;
					img {
						width: 70rpx;
						height: 70rpx;
						border-radius: 35rpx;
					}
				}
				.item-r {
					display: flex;
					flex-direction: column;
					background-color: white;
					margin-left: 20rpx;
					margin-top: 20rpx;
					margin-right: 30rpx;
					flex: 1;
					.h-r {
						display: flex;
						flex-direction: column;
						flex: 1;
						.r-t {
							display: flex;
							justify-content: space-between;
							.name {
								font-size: 32rpx;
								color: $textBlack-color;
							}
							.date {
								font-size:20rpx;
								color: $textGray-color;
							}
						}
						.r-b {
							display: flex;
							align-items: center;
							.b-l {
								display: flex;
								align-items: center;
								i {
									font-size: 20rpx;
									color: $theme-color;
								}
							}
							.b-r {
								font-size:20rpx;
								color: $textGray-color;
								margin-left: 20rpx;
							}
						}
					}
					.r-comtent {
						display: flex;
						margin-top: 10rpx;
						span {
							font-size: 24rpx;
							color: $textBlack-color;
						}
					}
					.r-imgs {
						display: flex;
						flex-direction: row;
						margin-top: 10rpx;
						.single {
							margin-top: 10rpx;
							img {
								width: 300rpx;
								height: 300rpx;
							}
						}
						.double {
							img {
								width: 160rpx;
								height: 160rpx;
								margin-right: 16rpx;
							}
						}
						.four {
							display: flex;
							width: 300rpx;
							flex-wrap: wrap;
							justify-content: space-between;
							img {
								width: 140rpx;
								height: 140rpx;
								margin: 10rpx 0;
							}
						}
					}
					.food-name {
						display: flex;
						flex-direction: column;
						margin-top: 10rpx;
						.name-t {
							display: flex;
							i {
								font-size: 24rpx;
								color: $textGray-color;
							}
							span {
								font-size: 24rpx;
								color: #777D8A;
								margin-left: 20rpx;
							}
						}
						.name-b {
							@extend .name-t;
							margin-top: 8rpx;
							span {
								color: $textBlack-color;
							}
						}
					}
					.reply-c {
						display: flex;
						background-color: #F4F4F4;
						padding: 20rpx 14rpx;
						margin-top: 20rpx;
						margin-bottom: 30rpx;
						span {
							color: $textGray-color;
							font-size: 24rpx;
						}
					}
				}
			}
			.item-c:last-child {
				margin-bottom: 220rpx;
			}
		}
	}
}
	
</style>